import React, { Component } from 'react'
import { Form, Input, Button, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom'
import { handleLogin } from '@/requests/api/user.js'
import './index.less'

@withRouter
class Login extends Component {
  onFinish = async values => {
    await handleLogin(values)
    this.props.history.push('/')
  };

  render() {
    return (
      <div className="login">
        <Card title="YCADMIN" bordered={false} className="login-box">
          <Form
            name="normal_login"
            onFinish={this.onFinish}
          >
            <Form.Item
              name="userName"
              rules={[{ required: true, message: 'Please input your Username!' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: 'Please input your Password!' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">Log in</Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

export default Login